<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TensorSpace - Yolo_v2_tiny Demo</title>
        <meta name="author" content="zchholmes / https://github.com/zchholmes">
        <meta name="author" content="syt123450 / https://github.com/syt123450">
        <meta name="author" content="Charlesliuyx / https://github.com/Charlesliuyx">
        <style>

            html, body {
                 margin: 0;
                 padding: 0;
                 width: 100%;
                 height: 100%;
             }

            #container {
                width: 100%;
                height: 100%;
            }

            #loadingPad {
                position: fixed;
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                background-color: #031D32;
                z-index: 2;
            }

            #loading {
                position: fixed;
                width: 30%;
                top: 150px;
                margin-left: 35%;
            }

        </style>
    </head>
    <body>

        <div id="container"></div>
        <div id="loadingPad">
            <img id="loading" src="./assets/loading.gif">
        </div>

        <script src="../lib/jquery.min.js"></script>
        <script src="../lib/three.min.js"></script>
        <script src="../lib/stats.min.js"></script>
        <script src="../lib/tween.min.js"></script>
        <script src="../lib/TrackballControls.js"></script>
        <script src="../lib/tf.min.js"></script>
        <script src="../../dist/tensorspace.js"></script>

        <script>

            let modelContainer = document.getElementById( "container" );

            let model = new TSP.models.Sequential( modelContainer, {

				stats: true,
                animeTime: 200

			}  );

            model.add( new TSP.layers.RGBInput() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Conv2d() );

            let yoloGrid = new TSP.layers.YoloGrid( {

                anchors: [ 1.08, 1.19, 3.42, 4.41, 6.63, 11.38, 9.42, 5.11, 16.62, 10.52 ],

                //voc class label name list
                classLabelList: [ "aeroplane", "bicycle", "bird", "boat", "bottle",
                    "bus", "car", "cat", "chair", "cow",
                    "diningtable", "dog", "horse", "motorbike", "person",
                    "pottedplant", "sheep", "sofa", "train", "tvmonitor" ],

                // default is 0.5
                scoreThreshold: 0.3,

                // default is 0.3
                iouThreshold: 0.3,

                // default is true
                isDrawFiveBoxes: true,

                // default is true
                isNMS: true,

                onCeilClicked: onYoloCeilClicked

            } );

            model.add( yoloGrid );

            let outputDetectionLayer = new TSP.layers.OutputDetection();

            model.add( outputDetectionLayer );

            model.load( {

                type: "tensorflow",
                url: "./yolov2-tiny-voc/model.json",
                outputsName: [ "Maximum", "MaxPool", "Maximum_1", "MaxPool_1", "Maximum_2",
                              "MaxPool_2", "Maximum_3", "MaxPool_3", "Maximum_4", "MaxPool_4",
                              "Maximum_5", "MaxPool_5", "Maximum_6", "Maximum_7", "add_8" ],
            } );

            model.init( function() {

				$.ajax( {

					url: "./data/person.json",
					type: 'GET',
					async: true,
					dataType: 'json',
					success: function ( data ) {

						model.predict( data );
						$( "#loadingPad" ).hide();

					}

				} );

            } );

            function onYoloCeilClicked( ceilData, rectList ) {

                outputDetectionLayer.addRectangleList( rectList );

                if ( !outputDetectionLayer.isOpen ) {

                    outputDetectionLayer.openLayer();

                }

            }

        </script>
    </body>
</html>
